<template>
  <div class="dataMenu">
    <MainContent title="菜单管理">
      <template #search-bar>
        <SearchBar inline>
          <template #toolbar>
            <el-form-item>
              <el-button type="primary" icon="Plus" @click="handleClickCreateMenu">新建菜单</el-button>
            </el-form-item>
          </template>
        </SearchBar>
      </template>
      <el-table
        :data="tableData"
        row-key="id"
        stripe
        default-expand-all
        v-loading="loading">
        <el-table-column prop="name" label="菜单名称" min-width="180" />
        <el-table-column prop="sort" label="排序" width="150" />
        <el-table-column prop="count" label="图表数量" width="150" />
        <el-table-column prop="matts" label="查询条件" width="280">
          <template #default="scope">
            <span
              v-for="(item, index) in scope.row.matts"
              :key="index">
              {{ item.attributesName }}
              {{ index + 1 != scope.row.matts.length ? '、' : '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="280">
          <template #default="scope">
            {{ new Date(scope.row.updateTime).format("yyyy-MM-dd hh:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="300">
          <template #default="scope">
            <el-button
              v-if="scope.row.parentId === 0"
              type="text" 
              size="small" 
              @click="handleClickCreateChild(scope.row)">
              新增子菜单
            </el-button>
            <el-button 
              type="text" 
              size="small" 
              @click="handleClickEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handleClickDel(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </MainContent>
    <CreateMenuDialog
    v-model:visible="createMenuVisible"
    v-model:rows="editMenuData"
    v-model:isEditMenu="isEditMenu"
    @handleSaveMenuSucc="handleSaveMenuSucc">
  </CreateMenuDialog>
  <CreateChildMenuDialog
    v-model:visible="createChildMenuVisible"
    v-model:rowData="rowData"
    v-model:rows="editSubMenuData"
    v-model:isEditSubMenu="isEditSubMenu"
    @handleSaveMenuSucc="handleSaveMenuSucc">
  </CreateChildMenuDialog>
  </div>
</template>

<script>
import CreateMenuDialog from './component/createMenuDialog.vue';
import CreateChildMenuDialog from './component/childMenuDialog.vue';
import { dataMenuListApi, dataRemoveMenuApi, dataRemoveSubMenuApi } from '@/api/dataCenter/dataMenu.js'
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: 'DataMenu',
  components: {
    CreateMenuDialog,
    CreateChildMenuDialog
  },
  data() {
    return {
      editMenuData: {},
      createMenuVisible: false,
      editSubMenuData: {},
      rowData: {},
      createChildMenuVisible: false,
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '菜单分组1',
          children: [

          ]
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '菜单分组2',
          children: [
            {
              id: 21,
              date: '2016-05-02',
              name: '菜单2-1',
            },
            {
              id: 22,
              date: '2016-05-02',
              name: '菜单2-2',
            }
          ]
        },
      ],
      isEditMenu: false,
      isEditSubMenu: false,
    }
  },
  mounted() {
    this.dataMenuListApiData();
  },
  methods: {
    // 获取菜单列表Api
    async dataMenuListApiData() {
      let res = await dataMenuListApi();
      if(res.code === 200) {
        this.tableData = res.payload;
      }
    },
    // 新建菜单
    handleClickCreateMenu() {
      this.isEditMenu = false;
      this.createMenuVisible = true;
    },
    
    // 新增子菜单
    handleClickCreateChild(row) {
      this.rowData = row;
      this.isEditSubMenu = false;
      this.createChildMenuVisible = true;
    },
    // 编辑子菜单
    handleClickEdit(row) {
      console.log('enter', row)
      if(row.parentId != 0) {
        this.editSubMenuData = row;
        this.isEditSubMenu = true;
        this.createChildMenuVisible = true;
      } else {
        this.editMenuData = row;
        this.isEditMenu = true;
        this.createMenuVisible = true;
      }
    },
    // 删除菜单
    handleClickDel(row) {
      ElMessageBox.confirm(`确认删除该菜单分组吗？`, "删除提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.dataRemoveMenuApiData(row.id);
      });
    },
    // 删除菜单Api
    async dataRemoveMenuApiData(id) {
      let res = await dataRemoveMenuApi({
        id
      });
      if(res.code === 200) {
        ElMessage({
          type: "success",
          message: "删除菜单组成功",
        });
        this.dataMenuListApiData();
      }
    },
    // 删除子菜单
    handleClickDel(row) {
      ElMessageBox.confirm(`确认删除该子菜单吗？`, "删除提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.dataRemoveSubMenuApiData(row.id);
      });
    },
    // 删除子菜单Api
    async dataRemoveSubMenuApiData(id) {
      let res = await dataRemoveSubMenuApi({
        id
      });
      if(res.code === 200) {
        ElMessage({
          type: "success",
          message: "删除菜单成功",
        });
        this.dataMenuListApiData();
      }
    },
    // 新建菜单分组成功
    handleSaveMenuSucc() {
      this.dataMenuListApiData();
    }
  }
}
</script>

<style lang="scss" scoped>
.dataMenu {

}
</style>